import { defineStore } from "pinia";
import { ref } from "vue";

export interface MenuState {
  menuLoading: boolean;
  activeMenu: string | number | null;
  menuData: Record<string, any>[] | null;
}

// export const useMenuStore = defineStore("menuStore", {
//   state: (): MenuState => ({
//     activeMenu: null,
//     menuData: null
//   }),
//   actions: {
//     setMenuData(menuData: Record<string, any>[] | null) {
//       this.$patch({ menuData });
//     },
//     setActiveMenu(activeMenu: string | number | null) {
//       this.$patch({ activeMenu });
//     }
//   },
//   persist: true
// });

export const useMenuStore = defineStore(
  "menuStore",
  () => {
    const menuLoading = ref(false);
    const activeMenu = ref<string | number | null>(null);
    const menuData = ref<Record<string, any>[] | null>(null);
    const colorMode = ref<string>("light");

    const setMenuLoading = (newMenuLoading: boolean) => {
      menuLoading.value = newMenuLoading;
    };

    const setActiveMenu = (newActiveMenu: string | number | null) => {
      activeMenu.value = newActiveMenu;
    };

    const setMenuData = (newMenuData: Record<string, any>[] | null) => {
      menuData.value = newMenuData;
    };

    const setColorMode = (newColorMode: string) => {
      colorMode.value = newColorMode;
    };

    return {
      menuData,
      activeMenu,
      colorMode,
      menuLoading,
      setMenuData,
      setActiveMenu,
      setColorMode,
      setMenuLoading
    };
  },
  {
    persist: true
  }
);
